<script lang="ts" setup>
import { defineProps, onMounted, ref } from "vue";
import { requestGetSoundSource } from "../../../utils/axiosURL";
import useSongURLStore from '../../../store/songURL'
import { storeToRefs } from "pinia";
import indexText from "./indexText.json"

const { playStates, songName } = storeToRefs(useSongURLStore())
const songURLStore = useSongURLStore()
const { songList } = defineProps({
  songList: Array
})

// 表头实例
const getTitleExample = ref<any>(null)
// 标题排序的状态
let showSortStateTitle = ref<any>(1)
let titleSpan = ref<boolean>(false)
// 歌手排序的状态
let showSortStateSinger = ref<any>(1)
let singerSpan = ref<boolean>(false)
// 专辑排序的状态
let showSortStateAlbum = ref<any>(1)
let albumSpan = ref<boolean>(false)
// 时长排序的状态
let showSortStateTime = ref<any>(1)
let timeSpan = ref<boolean>(false)

// 双击击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer: singer,
        picUrl: picUrl,
        duration: duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}
// 排序函数
const comprehensiveSort = (code: string, value: number) => {
  switch (code) {
    case "title":
      if (value === 2) {
        songList?.sort((x: any, y: any) => {
          if (/^[a-z]/i.test(x.name) || /^[a-z]/i.test(y.name)) {
            return x.name.localeCompare(y.name, "en")
          } else {
            return x.name.localeCompare(y.name, "zh-cn")
          }
        })
      } else if (value === 3) {
        songList?.sort((x: any, y: any) => {
          return x.name.localeCompare(y.name, "zh-cn")
        })
      } else {
        songList?.sort((x: any, y: any) => { return x.sortIndex - y.sortIndex })
      }
      break
    case "singer":
      if (value === 2) {
        songList?.sort((x: any, y: any) => {
          if (/^[a-z]/i.test(x.ar[0].name) || /^[a-z]/i.test(y.ar[0].name)) {
            return x.ar[0].name.localeCompare(y.ar[0].name, "en")
          } else {
            return x.ar[0].name.localeCompare(y.ar[0].name, "zh-cn")
          }
        })
      } else if (value === 3) {
        songList?.sort((x: any, y: any) => {
          return x.ar[0].name.localeCompare(y.ar[0].name, "zh-cn")
        })
      } else {
        songList?.sort((x: any, y: any) => { return x.sortIndex - y.sortIndex })
      }
      break
    case "album":
      if (value === 2) {
        songList?.sort((x: any, y: any) => {
          if (/^[a-z]/i.test(x.al.name) || /^[a-z]/i.test(y.al.name)) {
            return x.al.name.localeCompare(y.al.name, "en")
          } else {
            return x.al.name.localeCompare(y.al.name, "zh-cn")
          }
        })
      } else if (value === 3) {
        songList?.sort((x: any, y: any) => {
          return x.al.name.localeCompare(y.al.name, "zh-cn")
        })
      } else {
        songList?.sort((x: any, y: any) => { return x.sortIndex - y.sortIndex })
      }
      break
    case "time":
      if (value === 2) {
        songList?.sort((x: any, y: any) => {
          return x.dt - y.dt
        })
      } else if (value === 3) {
        songList?.sort((x: any, y: any) => {
          return y.dt - x.dt
        })
      } else {
        songList?.sort((x: any, y: any) => { return x.sortIndex - y.sortIndex })
      }
      break
    default:
      break
  }
}
// 鼠标点击表头item项事件
const clickSortFn = (code: string) => {
  switch (code) {
    case "title":
      if (showSortStateTitle.value >= 3) showSortStateTitle.value = 0
      showSortStateTitle.value++
      showSortStateSinger.value = showSortStateAlbum.value = showSortStateTime.value = 1
      singerSpan.value = albumSpan.value = timeSpan.value = false
      comprehensiveSort(code, showSortStateTitle.value)
      break
    case "singer":
      if (showSortStateSinger.value >= 3) showSortStateSinger.value = 0
      showSortStateSinger.value++
      showSortStateTitle.value = showSortStateAlbum.value = showSortStateTime.value = 1
      titleSpan.value = albumSpan.value = timeSpan.value = false
      comprehensiveSort(code, showSortStateSinger.value)
      break
    case "album":
      if (showSortStateAlbum.value >= 3) showSortStateAlbum.value = 0
      showSortStateAlbum.value++
      showSortStateTitle.value = showSortStateSinger.value = showSortStateTime.value = 1
      titleSpan.value = singerSpan.value = timeSpan.value = false
      comprehensiveSort(code, showSortStateAlbum.value)
      break
    case "time":
      if (showSortStateTime.value >= 3) showSortStateTime.value = 0
      showSortStateTime.value++
      showSortStateTitle.value = showSortStateSinger.value = showSortStateAlbum.value = 1
      titleSpan.value = singerSpan.value = albumSpan.value = false
      comprehensiveSort(code, showSortStateTime.value)
      break
    default:
      break
  }
}
// 鼠标进入表头item项事件
const mouseEnterFn = (code: string) => {
  switch (code) {
    case "title":
      titleSpan.value = true
      getTitleExample.value[1].style.background = "rgb(241,242,243)"
      break
    case "singer":
      singerSpan.value = true
      getTitleExample.value[2].style.background = "rgb(241,242,243)"
      break
    case "album":
      albumSpan.value = true
      getTitleExample.value[3].style.background = "rgb(241,242,243)"
      break
    case "time":
      timeSpan.value = true
      getTitleExample.value[4].style.background = "rgb(241,242,243)"
      break
    default:
      break
  }
}
// 鼠标离开表头item项事件
const mouseLeaveFn = (code: string) => {
  switch (code) {
    case "title":
      titleSpan.value = showSortStateTitle.value !== 1;
      getTitleExample.value[1].style.background = "#fff"
      break
    case "singer":
      singerSpan.value = showSortStateSinger.value !== 1;
      getTitleExample.value[2].style.background = "#fff"
      break
    case "album":
      albumSpan.value = showSortStateAlbum.value !== 1;
      getTitleExample.value[3].style.background = "#fff"
      break
    case "time":
      timeSpan.value = showSortStateTime.value !== 1;
      getTitleExample.value[4].style.background = "#fff"
      break
    default:
      break
  }
}
// 鼠标按下事件
const mouseDownFn = (code: string) => {
  switch (code) {
    case "title":
      getTitleExample.value[1].style.background = "linear-gradient(rgb(226,226,226), #fff)"
      break
    case "singer":
      getTitleExample.value[2].style.background = "linear-gradient(rgb(226,226,226), #fff)"
      break
    case "album":
      getTitleExample.value[3].style.background = "linear-gradient(rgb(226,226,226), #fff)"
      break
    case "time":
      getTitleExample.value[4].style.background = "linear-gradient(rgb(226,226,226), #fff)"
      break
    default:
      break
  }
}
// 鼠标抬起事件
const mouseUpFn = (code: string) => {
  switch (code) {
    case "title":
      getTitleExample.value[1].style.background = "rgb(241,242,243)"
      break
    case "singer":
      getTitleExample.value[2].style.background = "rgb(241,242,243)"
      break
    case "album":
      getTitleExample.value[3].style.background = "rgb(241,242,243)"
      break
    case "time":
      getTitleExample.value[4].style.background = "rgb(241,242,243)"
      break
    default:
      break
  }
}

onMounted(() => {
  songList?.map((item: any, index: number) => item.sortIndex = index)
})

</script>


<template>
  <table>
    <thead>
      <tr>
        <th v-for="item in indexText.tableHead" ref="getTitleExample" @click="clickSortFn(item.code)"
          @mouseenter="mouseEnterFn(item.code)" @mouseleave="mouseLeaveFn(item.code)" @mousedown="mouseDownFn(item.code)"
          @mouseup="mouseUpFn(item.code)">
          {{ item.text }}
          <span v-if="item.code === 'title' && titleSpan">
            <span v-if="showSortStateTitle === 1"><span class="iconfont icon-icon-"></span>{{
              indexText.defaultSort
            }}</span>
            <span v-if="showSortStateTitle === 2"><span class="iconfont icon-paixu1"></span>{{
              indexText.ascendingSort
            }}</span>
            <span v-if="showSortStateTitle === 3"><span class="iconfont icon-paixu"></span>{{
              indexText.reverseSort
            }}</span>
          </span>
          <span v-if="item.code === 'singer' && singerSpan">
            <span v-if="showSortStateSinger === 1"><span class="iconfont icon-icon-"></span>{{
              indexText.defaultSort
            }}</span>
            <span v-if="showSortStateSinger === 2"><span class="iconfont icon-paixu1"></span>{{
              indexText.ascendingSort
            }}</span>
            <span v-if="showSortStateSinger === 3"><span class="iconfont icon-paixu"></span>{{
              indexText.reverseSort
            }}</span>
          </span>
          <span v-if="item.code === 'album' && albumSpan">
            <span v-if="showSortStateAlbum === 1"><span class="iconfont icon-icon-"></span>{{
              indexText.defaultSort
            }}</span>
            <span v-if="showSortStateAlbum === 2"><span class="iconfont icon-paixu1"></span>{{
              indexText.ascendingSort
            }}</span>
            <span v-if="showSortStateAlbum === 3"><span class="iconfont icon-paixu"></span>{{
              indexText.reverseSort
            }}</span>
          </span>
          <span v-if="item.code === 'time' && timeSpan">
            <span v-if="showSortStateTime === 1" class="iconfont icon-icon-"></span>
            <span v-if="showSortStateTime === 2" class="iconfont icon-paixu1"></span>
            <span v-if="showSortStateTime === 3" class="iconfont icon-paixu"></span>
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in songList"
        @dblclick="clickSongPlay(item.id, item.name, item.ar[0].name, item.al.picUrl, item.dt, index)">
        <td class="td_operation">
          <span>{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</span>
              <span v-if="item.name !== songName" title="喜欢" class="iconfont icon-xihuan"></span>
              <span v-else>
                <span v-if="playStates" class="iconfont icon-24gf-volumeZero"></span>
                <span v-else class="iconfont icon-24gf-volumeMiddle"></span>
              </span>
              <span title="下载" class="iconfont icon-xiazai"></span>
        </td>
        <td>
          <div class="nameAndLabel">
            <div :title="`${item.name}`" class="SongName" :class="`${item.name === songName ? 'activePlay' : ''}`">{{
              item.name
            }}</div>
            <div class="moreLabel">
              <button v-if=item.hr>Hi-Res</button>
              <RouterLink :to="`/MVDetail/${item.mv}`">
                <button class="mv" v-if=item.mv>MV</button>
              </RouterLink>
              <button v-if=item.sq>SQ</button>
            </div>
          </div>
        </td>
        <td class="singer" :title="`${item.ar[0].name}`">{{ item.ar[0].name }}</td>
        <td class="album">
          <div :title="`${item.al.name}`">{{ item.al.name }}</div>
        </td>
        <td class="songTime">
          <SongTime :songDuration=item.dt />
        </td>
      </tr>
    </tbody>
  </table>
</template>


<style lang="scss" scoped>
table {
  width: 100%;

  thead {
    th {
      text-align: left;
      color: $font_main_color;
      font-weight: normal;
      font-size: $font-size-sm;
      font-family: $textFont;
      height: 37px;

      &~th {
        padding-left: 6px;
        box-sizing: border-box;
      }

      &~th:hover {
        background-color: rgb(241, 242, 243);
      }

      >span {
        >span {
          font-size: 12px;
          margin-right: 3px;
        }
      }
    }

    th:nth-child(1) {
      text-align: center;
      width: 80px;
      padding-left: 14px;
    }

    th:nth-child(2) {
      width: 43%;

      >span {

        //display: none;
        >span {
          font-size: $font-size-sm;

          >span {
            font-size: 12px;
          }
        }
      }
    }

    th:nth-child(3),
    th:nth-child(4) {
      width: 20%;

      >span {
        >span {
          font-size: $font-size-sm;

          >span {
            font-size: 12px;
          }
        }
      }

      &:hover>span {
        display: inline-block;
      }
    }

    th:nth-child(5) {
      width: 10%;

      >span {
        font-size: 13px;
      }

      &:hover>span {
        display: inline-block;
      }
    }
  }

  tbody {
    tr {
      td {
        color: $font_main_color;
        font-weight: normal;
        font-size: $font-size-sm;
        font-family: $textFont;
        line-height: 35px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &~td {
          padding-left: 6px;
          box-sizing: border-box;
        }

        .nameAndLabel {
          display: flex;
          align-items: center;

          .SongName {
            max-width: 300px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .activePlay {
            @include author_color('author_color');
          }

          .moreLabel {
            display: flex;
            align-items: center;
            height: 100%;

            button {
              border: none;
              outline: none;
              height: 16px;
              line-height: 16px;
              padding: 0 2px;
              // border: 1.5px solid $theme-red;
              border-width: 1.5px;
              border-style: solid;
              @include border_color('border_color');
              background-color: #fff;
              // color: $font_red_color;
              @include author_color('author_color');
              margin: 0 4px;
              font-family: $activeTextFont;
              font-size: $font-size-xs;
              border-radius: 3px;
              font-weight: bold;
            }

            .mv {
              cursor: pointer;
            }
          }
        }
      }

      .singer {
        max-width: 0;
      }

      .album {
        width: 130px !important;

        div {
          width: 130px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }

      .td_operation {
        display: flex;
        justify-content: space-between;
        color: rgb(182, 180, 180);
        padding-left: 20px;
        width: 80px;

        span {

          &:nth-child(2):hover,
          &:nth-child(3):hover {
            color: $font_active_color;
          }
        }

        .icon-24gf-volumeZero,
        .icon-24gf-volumeMiddle {
          margin-left: 3px;
          @include author_color('author_color');
        }
      }

      &:nth-child(odd) {
        background-color: rgb(250, 250, 250);
      }

      &~tr:hover {
        background-color: rgb(241, 242, 243);
      }
    }
  }
}
</style>
